<script lang="ts">
import 'element-plus/theme-chalk/el-message.css'
import  axios  from "axios";


export default {
  data() {
    return {
      uname:'',
      phone: '',
      password: '',
      agreement: false,
    }
  },
  
  methods: {
    register() {
      axios.post('/egg/register', {
        uname:this.uname,
        tel: this.phone,
        pwd: this.password
      }).then(res => {
        if (res.data.success) {
          alert('注册成功')
          location.href = './login'
        } else {
          alert('注册失败')
        }
      }).catch(err => {
        console.log(err)
        alert('注册失败')
      })
    }
  }
 }
</script>

<template>
  <div id="body">
    <div class="passcard-box">
      <div class="passcard-nav">
        <a href="https://www.zcool.com.cn" class="check-zcool-logo"></a>

        <span class="login-nav">
          已有账号，
          <a href="./login" class="main-link-color">马上登录</a>
        </span>

        <span class="main-link">返回站酷网  |</span>

      </div>
      <!-- 登陆导航 -->
      <div class="passcon">
        <h2 class="passmail-title main-bg-color">注册会员</h2>
        <form @submit.prevent="register" autocomplete="off">
          <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" v-model="uname" required>
          </div>

          <div class="form-group">
            <label for="tel">手机号：</label>
            <input type="text" id="tel" v-model="phone" required>
          </div>

          <div class="form-group">
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" v-model="password" required>
          </div>

          <div class="form-group">
            <input type="checkbox" id="agreement" v-model="agreement" required>
            <label for="agreement" class="checkbox-label">我已阅读并接受用户协议和隐私政策</label>
           
          </div>

          <button type="submit" class="register-button">注册</button>
        </form>
      </div>
    </div>

    <div class="footer">
      <p>京ICP备11017824号-4 / 京ICP证130164号 北京市公安局朝阳分局备案编号:110105000501</p>
      <p>
        Copyright © 2006-2023 ZCOOL
        <a href="javascript:;">中文</a>
        <a href="javascript:;">English</a>
      </p>
    </div>
  </div>
</template>
  

  
  <style scoped>
  *{
	margin: 0px;
	padding: 0px;
  }
  #body{
	margin-left: 200px;
	margin-top: 30px;
  }
  .passcart-nav{
	color: #444444;
	padding-top: 40px;
  line-height: 24px;
  font-size: 24px;
 
  
}
.check-zcool-logo {
  width: 134px;
  height: 24px;
  float: left;
  margin-right: 22px;
  background: url(./logo.svg) no-repeat left top;}
.login-nav{
	margin-left: 25px;
  font-size: 14px;
  float: right;
}

.main-link{
	float: right;
	margin-right: 10px;
}
.passcard-box{
  width: 900px;
  padding-top: 48px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;

.passcon {
  min-height: 394px;
  margin: 30px 0;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  background: #ffffff;

  .passmail-title{
	color: #fff;
  padding: 10px;
  text-align: center;
  }
  .form-group {
	margin-top: 40px;
	margin-bottom: 40px;
display: flex;
justify-content: center;
align-content: center;
  
}

  .main-bg-color {
  background: #ffe300;
  color: #333333;
}
.checkbox-label {
  font-size: 14px;
}
.register-button {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}
  
}
}
.footer{
	font-size: 14px;
    margin-top: 20px;
	margin-left: 100px;
}


  </style>
  